<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>在线考试系统</title>
    <link href="portal.css" rel="stylesheet">
    <style>
        /* 补充样式 */
        .exam-container {
            display: flex;
            min-height: 100vh;
            background-color: #f1ecec;
        }
        
        .question-nav {
            width: 300px;
            background-color: white;
            box-shadow: 2px 0 5px rgba(0,0,0,0.1);
            padding: 2rem;
            position: sticky;
            top: 0;
            height: 100vh;
            overflow-y: auto;
        }
        
        .question-content {
            flex: 1;
            padding: 3rem;
        }
        
        .question-card {
            background-color: white;
            border-radius: 4px;
            box-shadow: 0 0.5rem 0.8rem 0 rgba(0,0,0,0.2);
            padding: 2rem;
            margin-bottom: 2rem;
        }
        
        .question-nav-item {
            display: flex;
            align-items: center;
            padding: 1rem;
            margin-bottom: 0.5rem;
            border-radius: 4px;
            cursor: pointer;
        }
        
        .question-nav-item:hover {
            background-color: #f1ecec;
        }
        
        .question-nav-item.completed {
            background-color: #aacd06;
            color: white;
        }
        
        .question-nav-item.current {
            background-color: #0cb6ec;
            color: white;
        }
        
        .question-nav-number {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color: #f1ecec;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 1rem;
        }
        
        .question-nav-item.completed .question-nav-number,
        .question-nav-item.current .question-nav-number {
            background-color: white;
            color: #383b3b;
        }
        
        .question-type {
            font-size: 1.4rem;
            color: #6e7171;
            margin-bottom: 0.5rem;
        }
        
        .question-text {
            font-size: 1.8rem;
            margin-bottom: 1.5rem;
        }
        
        .option-item {
            margin-bottom: 1rem;
            display: flex;
            align-items: center;
        }
        
        .option-input {
            margin-right: 1rem;
        }
        
        .submit-btn {
            margin-top: 2rem;
            width: 100%;
        }
        
        .nav-header {
            font-size: 2rem;
            font-weight: 500;
            margin-bottom: 1.5rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid #e0e0e0;
        }
        
        .timer {
            font-size: 1.8rem;
            color: #ee0857;
            margin-bottom: 1.5rem;
            text-align: center;
            font-weight: 500;
        }
    </style>
</head>
<body>
    <div class="menu">
        <div class="menu__left-side">
            <div class="menu__brand">
                <div class="menu__brand--ocado">
                    <h1>在线考试系统</h1>
                </div>
            </div>
        </div>
    </div>
    
    <div class="exam-container">
        <!-- 左侧题目导航 -->
        <div class="question-nav">
            <div class="nav-header">题目导航</div>
            <div class="timer">剩余时间: 59:23</div>
            
            <div id="question-list">
                <!-- 单选题 -->
                <div class="question-nav-item current" data-qid="1">
                    <div class="question-nav-number">1</div>
                    <div>单选题示例</div>
                </div>
                
                <!-- 多选题 -->
                <div class="question-nav-item" data-qid="2">
                    <div class="question-nav-number">2</div>
                    <div>多选题示例</div>
                </div>
                
                <!-- 判断题 -->
                <div class="question-nav-item" data-qid="3">
                    <div class="question-nav-number">3</div>
                    <div>判断题示例</div>
                </div>
                
                <!-- 更多题目... -->
                <div class="question-nav-item" data-qid="4">
                    <div class="question-nav-number">4</div>
                    <div>HTML基础题</div>
                </div>
                
                <div class="question-nav-item" data-qid="5">
                    <div class="question-nav-number">5</div>
                    <div>CSS样式题</div>
                </div>
                
                <div class="question-nav-item" data-qid="6">
                    <div class="question-nav-number">6</div>
                    <div>JavaScript问题</div>
                </div>
            </div>
            
            <button class="button button--primary submit-btn" id="submit-exam">提交试卷</button>
        </div>
        
        <!-- 右侧题目内容 -->
        <div class="question-content">
            <!-- 单选题 -->
            <div class="question-card" id="question-1">
                <div class="question-type">单选题</div>
                <h3>1. 下面哪个是HTML的根元素？</h3>
                <div class="question-text">请选择HTML文档的根元素：</div>
                
                <div class="options">
                    <div class="option-item">
                        <input type="radio" id="q1-option1" name="q1" class="option-input">
                        <label for="q1-option1">&lt;head&gt;</label>
                    </div>
                    <div class="option-item">
                        <input type="radio" id="q1-option2" name="q1" class="option-input">
                        <label for="q1-option2">&lt;body&gt;</label>
                    </div>
                    <div class="option-item">
                        <input type="radio" id="q1-option3" name="q1" class="option-input">
                        <label for="q1-option3">&lt;html&gt;</label>
                    </div>
                    <div class="option-item">
                        <input type="radio" id="q1-option4" name="q1" class="option-input">
                        <label for="q1-option4">&lt;div&gt;</label>
                    </div>
                </div>
                
                <div class="button-group">
                    <button class="button button--secondary button--secondary--dark" id="next-q1">下一题</button>
                </div>
            </div>
            
            <!-- 多选题 -->
            <div class="question-card" id="question-2" style="display:none;">
                <div class="question-type">多选题</div>
                <h3>2. 下面哪些是CSS的定位方式？</h3>
                <div class="question-text">请选择所有正确的CSS定位方式：</div>
                
                <div class="options">
                    <div class="option-item">
                        <input type="checkbox" id="q2-option1" name="q2" class="option-input">
                        <label for="q2-option1">static</label>
                    </div>
                    <div class="option-item">
                        <input type="checkbox" id="q2-option2" name="q2" class="option-input">
                        <label for="q2-option2">relative</label>
                    </div>
                    <div class="option-item">
                        <input type="checkbox" id="q2-option3" name="q2" class="option-input">
                        <label for="q2-option3">fixed</label>
                    </div>
                    <div class="option-item">
                        <input type="checkbox" id="q2-option4" name="q2" class="option-input">
                        <label for="q2-option4">absolute</label>
                    </div>
                    <div class="option-item">
                        <input type="checkbox" id="q2-option5" name="q2" class="option-input">
                        <label for="q2-option5">sticky</label>
                    </div>
                </div>
                
                <div class="button-group">
                    <button class="button button--secondary button--secondary--dark" id="prev-q2">上一题</button>
                    <button class="button button--secondary button--secondary--dark" id="next-q2">下一题</button>
                </div>
            </div>
            
            <!-- 判断题 -->
            <div class="question-card" id="question-3" style="display:none;">
                <div class="question-type">判断题</div>
                <h3>3. JavaScript和Java是同一种语言。</h3>
                <div class="question-text">请判断上述说法是否正确：</div>
                
                <div class="options">
                    <div class="option-item">
                        <input type="radio" id="q3-option1" name="q3" class="option-input">
                        <label for="q3-option1">正确</label>
                    </div>
                    <div class="option-item">
                        <input type="radio" id="q3-option2" name="q3" class="option-input">
                        <label for="q3-option2">错误</label>
                    </div>
                </div>
                
                <div class="button-group">
                    <button class="button button--secondary button--secondary--dark" id="prev-q3">上一题</button>
                    <button class="button button--secondary button--secondary--dark" id="next-q3">下一题</button>
                </div>
            </div>
            
            <!-- 更多题目内容... -->
            <div class="question-card" id="question-4" style="display:none;">
                <div class="question-type">单选题</div>
                <h3>4. HTML中哪个标签用于创建超链接？</h3>
                <div class="question-text">请选择正确的HTML超链接标签：</div>
                
                <div class="options">
                    <div class="option-item">
                        <input type="radio" id="q4-option1" name="q4" class="option-input">
                        <label for="q4-option1">&lt;link&gt;</label>
                    </div>
                    <div class="option-item">
                        <input type="radio" id="q4-option2" name="q4" class="option-input">
                        <label for="q4-option2">&lt;a&gt;</label>
                    </div>
                    <div class="option-item">
                        <input type="radio" id="q4-option3" name="q4" class="option-input">
                        <label for="q4-option3">&lt;href&gt;</label>
                    </div>
                    <div class="option-item">
                        <input type="radio" id="q4-option4" name="q4" class="option-input">
                        <label for="q4-option4">&lt;anchor&gt;</label>
                    </div>
                </div>
                
                <div class="button-group">
                    <button class="button button--secondary button--secondary--dark" id="prev-q4">上一题</button>
                    <button class="button button--secondary button--secondary--dark" id="next-q4">下一题</button>
                </div>
            </div>
            
            <div class="question-card" id="question-5" style="display:none;">
                <div class="question-type">多选题</div>
                <h3>5. 下面哪些是CSS盒模型的组成部分？</h3>
                <div class="question-text">请选择所有正确的CSS盒模型组成部分：</div>
                
                <div class="options">
                    <div class="option-item">
                        <input type="checkbox" id="q5-option1" name="q5" class="option-input">
                        <label for="q5-option1">内容(content)</label>
                    </div>
                    <div class="option-item">
                        <input type="checkbox" id="q5-option2" name="q5" class="option-input">
                        <label for="q5-option2">内边距(padding)</label>
                    </div>
                    <div class="option-item">
                        <input type="checkbox" id="q5-option3" name="q5" class="option-input">
                        <label for="q5-option3">边框(border)</label>
                    </div>
                    <div class="option-item">
                        <input type="checkbox" id="q5-option4" name="q5" class="option-input">
                        <label for="q5-option4">外边距(margin)</label>
                    </div>
                    <div class="option-item">
                        <input type="checkbox" id="q5-option5" name="q5" class="option-input">
                        <label for="q5-option5">阴影(shadow)</label>
                    </div>
                </div>
                
                <div class="button-group">
                    <button class="button button--secondary button--secondary--dark" id="prev-q5">上一题</button>
                    <button class="button button--secondary button--secondary--dark" id="next-q5">下一题</button>
                </div>
            </div>
            
            <div class="question-card" id="question-6" style="display:none;">
                <div class="question-type">判断题</div>
                <h3>6. JavaScript是一种强类型语言。</h3>
                <div class="question-text">请判断上述说法是否正确：</div>
                
                <div class="options">
                    <div class="option-item">
                        <input type="radio" id="q6-option1" name="q6" class="option-input">
                        <label for="q6-option1">正确</label>
                    </div>
                    <div class="option-item">
                        <input type="radio" id="q6-option2" name="q6" class="option-input">
                        <label for="q6-option2">错误</label>
                    </div>
                </div>
                
                <div class="button-group">
                    <button class="button button--secondary button--secondary--dark" id="prev-q6">上一题</button>
                    <button class="button button--primary" id="submit-last">提交试卷</button>
                </div>
            </div>
        </div>
    </div>
    
    <script>
        // 当前显示的题目ID
        let currentQuestion = 1;
        const totalQuestions = 6;
        
        // 导航点击事件
        document.querySelectorAll('.question-nav-item').forEach(item => {
            item.addEventListener('click', function() {
                const qid = parseInt(this.getAttribute('data-qid'));
                showQuestion(qid);
            });
        });
        
        // 下一题按钮事件
        document.getElementById('next-q1').addEventListener('click', () => showQuestion(2));
        document.getElementById('next-q2').addEventListener('click', () => showQuestion(3));
        document.getElementById('next-q3').addEventListener('click', () => showQuestion(4));
        document.getElementById('next-q4').addEventListener('click', () => showQuestion(5));
        document.getElementById('next-q5').addEventListener('click', () => showQuestion(6));
        
        // 上一题按钮事件
        document.getElementById('prev-q2').addEventListener('click', () => showQuestion(1));
        document.getElementById('prev-q3').addEventListener('click', () => showQuestion(2));
        document.getElementById('prev-q4').addEventListener('click', () => showQuestion(3));
        document.getElementById('prev-q5').addEventListener('click', () => showQuestion(4));
        document.getElementById('prev-q6').addEventListener('click', () => showQuestion(5));
        
        // 提交按钮事件
        document.getElementById('submit-exam').addEventListener('click', submitExam);
        document.getElementById('submit-last').addEventListener('click', submitExam);
        
        // 选项选择事件 - 标记为已完成
        document.querySelectorAll('input[type="radio"], input[type="checkbox"]').forEach(input => {
            input.addEventListener('change', function() {
                const questionId = this.name.substring(1); // 从q1, q2等获取数字
                markQuestionAsCompleted(parseInt(questionId));
            });
        });
        
        // 显示指定题目
        function showQuestion(qid) {
            // 隐藏当前题目
            document.getElementById(`question-${currentQuestion}`).style.display = 'none';
            
            // 更新导航中的当前题目样式
            document.querySelector(`.question-nav-item[data-qid="${currentQuestion}"]`).classList.remove('current');
            
            // 显示新题目
            document.getElementById(`question-${qid}`).style.display = 'block';
            
            // 更新导航中的新当前题目样式
            document.querySelector(`.question-nav-item[data-qid="${qid}"]`).classList.add('current');
            
            // 更新当前题目ID
            currentQuestion = qid;
            
            // 滚动到题目顶部
            document.getElementById(`question-${qid}`).scrollIntoView({ behavior: 'smooth' });
        }
        
        // 标记题目为已完成
        function markQuestionAsCompleted(qid) {
            const navItem = document.querySelector(`.question-nav-item[data-qid="${qid}"]`);
            if (!navItem.classList.contains('completed')) {
                navItem.classList.add('completed');
            }
        }
        
        // 提交考试
        function submitExam() {
            if (confirm('确定要提交试卷吗？提交后将无法修改答案。')) {
                alert('试卷提交成功！');
                // 这里可以添加实际的提交逻辑
            }
        }
        
        // 模拟计时器
        let minutes = 59;
        let seconds = 59;
        
        function updateTimer() {
            const timerElement = document.querySelector('.timer');
            timerElement.textContent = `剩余时间: ${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
            
            seconds--;
            if (seconds < 0) {
                seconds = 59;
                minutes--;
            }
            
            if (minutes < 0) {
                // 时间到，自动提交
                clearInterval(timerInterval);
                submitExam();
            }
        }
        
        const timerInterval = setInterval(updateTimer, 1000);
    </script>
</body>
</html>
